<template>
  <!-- 辖区管理 -->
  <div class="area-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree @onSelect="onSelectTree"></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="tabsBtnShow" v-if="showBtns">
          <a-button class="searchBtn" @click="addHandle" v-has="'jurisdiction:add'">新增</a-button>
        </div>

        <div class="l-w_content">
          <top-title :updateTime="true" :content="content"></top-title>

          <div class="l-w_c_content">
            <div class="search-group">
              <div class="input-wrap">
                <div class="label">辖区名称：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.jurisdictionName" placeholder="请填写辖区名称" />
                </div>
              </div>
              <div class="input-wrap">
                <div class="label">责任民警：</div>
                <div class="input-item">
                  <a-input :maxLength="30" v-model="queryParam.principalPoliceUserName" placeholder="请填写责任民警" />
                </div>
              </div>

              <div class="btn-wrap">
                <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
                <a-button class="resetBtn" @click="resetHandle()" type="primary"> 重置 </a-button>
              </div>
            </div>

            <div>
              <a-table
                rowKey="id"
                class="tableList"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                @change="handleTableChange"
              >
                <template slot="policeAgencyId_dictText" slot-scope="records">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ records }} </span>
                    </template>
                    <span>{{ records }} </span>
                  </a-tooltip>
                </template>
                <template slot="scopeDescription" slot-scope="records">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ records }} </span>
                    </template>
                    <span>{{ records }} </span>
                  </a-tooltip>
                </template>
                <template v-slot:action="records">
                  <span class="operation deatil-color" @click="detailsHandle(records)" v-has="'jurisdiction:detail'"
                    >详情
                  </span>
                  <span class="operation deatil-color" @click="editHandle(records)" v-has="'jurisdiction:edit'"
                    >编辑
                  </span>
                  <span class="operation warnColor" @click="showDelete(records)" v-has="'jurisdiction:delete'"
                    >删除
                  </span>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <add-area-modal ref="addAreaModal" :title="title" @refresh="searchQuery()"></add-area-modal>
    <details-area-modal ref="detailsAreaModal"></details-area-modal>

    <allMessage
      :publicVisible="publicVisible"
      ref="allMessage"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import { jurisdictionDelete } from '@/api/area'
import addAreaModal from './modules/addAreaModal'
import detailsAreaModal from './modules/detailsAreaModal'
import allMessage from '@/components/allMessage'
import startEndTime from '@/components/startEndTime'
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'

import moment from 'moment'

export default {
  name: 'area-index',
  components: { addAreaModal, detailsAreaModal, allMessage, startEndTime, leftTree, topTitle },
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/police/jurisdiction/page',
        tree: true,
      },
      content: [['辖区信息']],
      showBtns: false,
      // showBtnsType: '', // 当前账号身份
      policeStation: {},
      title: '',
      publicVisible: false,
      resetTime: false,
      ipagination: {
        current: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '所属派出所',
          dataIndex: 'policeAgencyId_dictText',
          ellipsis: true,
          scopedSlots: { customRender: 'policeAgencyId_dictText' },
        },
        {
          title: '辖区编码',
          dataIndex: 'jurisdictionNo',
          ellipsis: true,
        },
        {
          title: '辖区名称',
          dataIndex: 'jurisdictionName',
          ellipsis: true,
        },
        {
          title: '范围描述',
          dataIndex: 'scopeDescription',
          ellipsis: true,
          scopedSlots: { customRender: 'scopeDescription' },
        },
        {
          title: '民警负责人',
          dataIndex: ['principalPoliceUser', 'name'],
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId(v) {
      this.queryParam.policeAgencyId = v.id ? v.id : ''
      if (v && v.type == 4) {
        this.showBtns = true

        this.policeStation = v
      } else {
        this.showBtns = false
      }
    },
  },
  methods: {
    onSelectTree(selectedKeys, info) {
      this.queryParam.policeAgencyId = selectedKeys.length ? selectedKeys[0] : ''
      this.searchQuery()
    },
    searchQuery() {
      this.loadData(1)

      this.resetTime = false
    },
    resetHandle() {
      this.resetTime = true
      this.searchReset()
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.createTime_begin = moment(v).valueOf()
      } else {
        this.queryParam.createTime_end = moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.createTime_begin = null
        this.queryParam.createTime_end = null
      }
    },
    addHandle() {
      this.title = '新增辖区'
      this.$refs.addAreaModal.show({ policeAgencyId: this.policeStation.id })
    },
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    detailsHandle(records) {
      this.$refs.detailsAreaModal.show(records)
    },
    editHandle(records) {
      this.title = '编辑'
      this.$refs.addAreaModal.show(records)
    },
    tipMessage(records) {
      jurisdictionDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
  },
}
</script>
<style lang="less" scoped>
.area-index {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
  }
}
</style>
